<template>


  <el-dialog
    top="20px"
    :title="defaultValue.title"
    :lock-scroll="tableConfig.lockScroll"
    :append-to-body="tableConfig.appendToBody"
    :visible="tableConfig.show"
    @close="tableConfig.show = false"
    :show-close="tableConfig.close"
    :destroy-on-close="tableConfig.destroyOnClose"
    width="1100px">

    <el-form size="small" ref="formOpsStakeholderRef" :rules="checkRule" :model="submitData" label-width="180px">


        <el-form-item label="头像" prop="ico">
          <SingleImageAsyncUpload ref="userImagesRef" imageTypePath="stakeholder" objectType="24"/>
        </el-form-item>

      <el-divider content-position="center"><p style="color: #FF7043">身份识别</p></el-divider>

        <el-form-item label="姓名" prop="name">
            <el-input v-model="submitData.name" />
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="submitData.sex" placeholder="请选择" clearable  >
            <el-option key="1" label="男性" :value="1"/>
            <el-option key="0" label="女性" :value="0"/>
            <el-option key="9" label="未知" :value="9"/>
          </el-select>
        </el-form-item>
        <el-form-item label="年龄说明" prop="age">
            <el-input v-model="submitData.age" />
        </el-form-item>
        <el-form-item label="组织层级" prop="level">
          <el-select v-model="submitData.level" placeholder="请选择">
            <el-option
              v-for="item in dict1001"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="干系人类型" prop="stakeholderType">
          <el-select v-model="submitData.stakeholderType" placeholder="请选择">
            <el-option
              v-for="item in dict1002"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="组织角色/职位" prop="orgRole">
            <el-input v-model="submitData.orgRole" type="textarea" :autosize="{minRows: 2}" />
        </el-form-item>
        <el-form-item label="项目内角色" prop="projectRole">
          <el-select v-model="submitData.projectRole" placeholder="请选择">
            <el-option
              v-for="item in dict1003"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

      <el-divider content-position="center"><p style="color: #FF7043">联系与可达性</p></el-divider>

        <el-form-item label="邮箱" prop="email">
            <el-input v-model="submitData.email" />
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
            <el-input v-model="submitData.phone" />
        </el-form-item>

      <el-divider content-position="center"><p style="color: #FF7043">利益与影响</p></el-divider>

        <el-form-item label="利益类别" prop="benefitClass">
          <el-select v-model="submitData.benefitClass" placeholder="请选择">
            <el-option
              v-for="item in dict1004"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="核心利益点" prop="benefitPoint">
            <el-input v-model="submitData.benefitPoint" type="textarea" :autosize="{minRows: 2}" />
        </el-form-item>
        <el-form-item label="正向/负向影响" prop="influenceTrend">
          <el-select v-model="submitData.influenceTrend" placeholder="请选择" clearable  >
            <el-option key="1" label="正向" :value="1"/>
            <el-option key="0" label="负向" :value="0"/>
          </el-select>
        </el-form-item>
        <el-form-item label="影响领域" prop="influenceField">
          <el-select v-model="submitData.influenceField" placeholder="请选择">
            <el-option
              v-for="item in dict1005"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

      <el-divider content-position="center"><p style="color: #FF7043">权力–利益矩阵</p></el-divider>

        <el-form-item label="权力级别" prop="rightLevel">
          <el-select v-model="submitData.rightLevel" placeholder="请选择" clearable  >
            <el-option key="high" label="高" value="high"/>
            <el-option key="middle" label="中" value="middle"/>
            <el-option key="low" label="低" value="low"/>
          </el-select>
        </el-form-item>
        <el-form-item label="利益级别" prop="interestLevel">
          <el-select v-model="submitData.interestLevel" placeholder="请选择" clearable  >
            <el-option key="high" label="高" value="high"/>
            <el-option key="middle" label="中" value="middle"/>
            <el-option key="low" label="低" value="low"/>
          </el-select>
        </el-form-item>
        <el-form-item label="利益象限" prop="interestQuadrant">
          <el-select v-model="submitData.interestQuadrant" placeholder="请选择">
            <el-option
              v-for="item in dict1006"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="当前支持度" prop="supportId">
          <el-select v-model="submitData.supportId" placeholder="请选择" clearable  >
            <el-option key="5" label="完全支持 (5)" :value="5"/>
            <el-option key="4" label="非常支持 (4)" :value="4"/>
            <el-option key="3" label="比较支持 (3)" :value="3"/>
            <el-option key="2" label="略微支持 (2)" :value="2"/>
            <el-option key="1" label="轻微支持 (1)" :value="1"/>
            <el-option key="0" label="中立 (0)" :value="0"/>
            <el-option key="-1" label="轻微反对 (-1)" :value="-1"/>
            <el-option key="-2" label="略微反对 (-2)" :value="-2"/>
            <el-option key="-3" label="比较反对 (-3)" :value="-3"/>
            <el-option key="-4" label="非常反对 (-4)" :value="-4"/>
            <el-option key="-5" label="完全反对 (-5)" :value="-5"/>
          </el-select>
        </el-form-item>


      <el-divider content-position="center"><p style="color: #FF7043">沟通管理</p></el-divider>

        <el-form-item label="沟通目标" prop="interactTarget">
          <el-select v-model="submitData.interactTarget" placeholder="请选择">
            <el-option
              v-for="item in dict1007"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="沟通频次" prop="interactFrequency">
          <el-select v-model="submitData.interactFrequency" placeholder="请选择">
            <el-option
              v-for="item in dict1008"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="沟通方式" prop="interactFormat">
          <el-select v-model="submitData.interactFormat" placeholder="请选择">
            <el-option
              v-for="item in dict1009"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="沟通负责人" prop="interactPerson">
            <el-input v-model="submitData.interactPerson" />
        </el-form-item>

      <el-divider content-position="center"><p style="color: #FF7043">约束与依赖</p></el-divider>

        <el-form-item label="对干系人依赖" prop="dependentOneself">
          <el-select v-model="submitData.dependentOneself" placeholder="请选择">
            <el-option
              v-for="item in dict1010"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="干系人对项目依赖" prop="dependentProject">
          <el-select v-model="submitData.dependentProject" placeholder="请选择">
            <el-option
              v-for="item in dict1011"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

      <el-divider content-position="center"><p style="color: #FF7043">文化与个人画像</p></el-divider>

        <el-form-item label="决策风格" prop="decisionStyle">
          <el-select v-model="submitData.decisionStyle" placeholder="请选择">
            <el-option
              v-for="item in dict1012"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="个人动机" prop="motivation">
          <el-select v-model="submitData.motivation" placeholder="请选择">
            <el-option
              v-for="item in dict1013"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="个人忌讳/雷区" prop="taboo">
            <el-input v-model="submitData.taboo" type="textarea" :autosize="{minRows: 3}" />
        </el-form-item>
        <el-form-item label="学历" prop="education">
            <el-input v-model="submitData.education" />
        </el-form-item>



    </el-form>


    <span slot="footer" class="dialog-footer">
      <el-button plain type="warning" @click="toSaveUpd"
                 v-if="defaultValue.saveUpdSelect !== 'select'">{{ defaultValue.title }}
                 </el-button>
      <el-button plain type="primary" @click="tableConfig.show = false">关闭</el-button>
    </span>

  </el-dialog>


</template>

<script>

import http from '@/utils/http'
import {checkNull, clearInvalid} from "@/utils/utils"
import SingleImageAsyncUpload from '@/components/common/SingleImageAsyncUpload.vue';


export default {
  name: "OpsStakeholderSaveUpd",
  components: {
    SingleImageAsyncUpload,
  },
  data() {
    return {
      // 表格的默认值
      tableConfig: {
        // 关闭时销毁 Dialog 中的元素
        destroyOnClose: true,
        // 弹出框是否打开
        show: false,
        // 是否显示关闭按钮
        close: true,
        // 下面2个属性解决打开弹出框后没有在最上面显示的问题，导致看到的内容是一半的，需要先将滚动条移到最上面
        lockScroll: false,
        appendToBody: true,
      },
      // 默认值，进入页面后的值
      defaultValue: {
        // 弹出框标题
        title: '查看',
        // 保存还是修改or查看,取值有 select | save | upd
        saveUpdSelect: 'select'
      },
      // 提交的数据
      submitData:{
        id: null,
        siteId: null,
        ico: null,
        name: null,
        sex: null,
        age: null,
        level: null,
        stakeholderType: null,
        orgRole: null,
        projectRole: null,
        email: null,
        phone: null,
        benefitPoint: null,
        benefitClass: null,
        influenceTrend: null,
        influenceField: null,
        rightLevel: null,
        interestLevel: null,
        interestQuadrant: null,
        supportId: null,
        interactTarget: null,
        interactFrequency: null,
        interactFormat: null,
        interactPerson: null,
        dependentOneself: null,
        dependentProject: null,
        decisionStyle: null,
        motivation: null,
        taboo: null,
        education: null,
      },
      // 校验规则
      checkRule: {
        name: [{required: true, message: '请输入姓名', trigger: 'blur'}],
        sex: [{required: true, message: '请输入性别', trigger: 'change'}],
      },
      // 组织层级
      dict1001: [],
      // 干系人类型
      dict1002: [],
      // 干系人项目内角色
      dict1003: [],
      // 干系人利益类别
      dict1004: [],
      // 干系人影响领域
      dict1005: [],
      // 干系人利益象限
      dict1006: [],
      // 干系人沟通目标
      dict1007: [],
      // 干系人沟通频次
      dict1008: [],
      // 干系人沟通方式
      dict1009: [],
      // 对干系人依赖
      dict1010: [],
      // 干系人对项目依赖
      dict1011: [],
      // 干系人决策风格
      dict1012: [],
      // 干系人个人动机
      dict1013: [],
    }
  },
  methods: {
    /**
     * 初始化操作
     * @param operateType 操作类型,保存还是修改or查看,取值有 select \ save \ upd
     * @param obj 如果是修改和查看，则是详细数据,需要赋值
     */
    init(operateType, obj){
      this.defaultValue.saveUpdSelect = operateType
      this.clearOldData()
      this.getDictListPage1001()
      this.getDictListPage1002()
      this.getDictListPage1003()
      this.getDictListPage1004()
      this.getDictListPage1005()
      this.getDictListPage1006()
      this.getDictListPage1007()
      this.getDictListPage1008()
      this.getDictListPage1009()
      this.getDictListPage1010()
      this.getDictListPage1011()
      this.getDictListPage1012()
      this.getDictListPage1013()

      if (operateType === 'save'){
        this.defaultValue.title = '新增'
        this.submitData.sex = 9

      } else if (operateType === 'upd'){
        this.defaultValue.title = '修改'
        // 要json处理下，否则会影响之前的值
        this.submitData = JSON.parse(JSON.stringify(obj))

        // 页面加载完成后执行，否则无法获取到dom
        this.$nextTick(() => {
          if (!checkNull(this.submitData.ico)){
            http.getImageUrl(this.submitData.ico).then(url => {
              this.$nextTick(() => {
                if (url) {
                  // 对图片回显进行处理，回显
                  let poster = {name: this.submitData.name, url: url, uid: this.submitData.id}
                  // 先清空，否则可能数据污染
                  this.$refs.userImagesRef.upload.fileList = []
                  this.$refs.userImagesRef.upload.fileList.push(poster)
                  this.$refs.userImagesRef.uploadHide()
                }
              })
            }).catch(e => {
              console.error('加载图片失败:', e)
            })

          }
        })

      } else {
        // 可能查看
      }

      this.tableConfig.show = true
    },
    /**
     * 清理掉旧数据
     */
    clearOldData(){
      this.submitData = {
        id: null,
        siteId: null,
        ico: null,
        name: null,
        sex: null,
        age: null,
        level: null,
        stakeholderType: null,
        orgRole: null,
        projectRole: null,
        email: null,
        phone: null,
        benefitPoint: null,
        benefitClass: null,
        influenceTrend: null,
        influenceField: null,
        rightLevel: null,
        interestLevel: null,
        interestQuadrant: null,
        supportId: null,
        interactTarget: null,
        interactFrequency: null,
        interactFormat: null,
        interactPerson: null,
        dependentOneself: null,
        dependentProject: null,
        decisionStyle: null,
        motivation: null,
        taboo: null,
        education: null,
      }
    },
    /**
     * 是保存还是修改
     */
    toSaveUpd(){
      if (this.defaultValue.saveUpdSelect === 'save'){
        this.saveOpsStakeholder()

      } else if (this.defaultValue.saveUpdSelect === 'upd'){
        this.updOpsStakeholder()

      } else {

      }
    },
    /**
     * 保存
     */
    saveOpsStakeholder(){
      // 读取图片
      this.submitData.ico = this.$refs.userImagesRef.upload.fileId
      this.submitData.siteId = this.$route.query.siteId

      http.post("/opsStakeholder/saveOpsStakeholder", this.submitData).then(response => {
        let res = response.data;

        this.$message.success ("保存成功");
        this.$emit('getListPage', null)
        // 关闭弹出框,继续添加
        this.tableConfig.show = false

      }).catch(error => {
        this.$message.error (error.message);
      })
    },
    /**
     * 更新
     */
    updOpsStakeholder(){
      clearInvalid(this.submitData)
      http.post("/opsStakeholder/updOpsStakeholder", this.submitData).then(response => {
        let res = response.data;

        this.$message.success ("更新成功");
        this.$emit('getListPage', null)
        // 关闭弹出框
        this.tableConfig.show = false

      }).catch(error => {
        this.$message.error (error.message);
      })
    },
    /**
     * 分页查询字典-干系人组织层级
     */
    getDictListPage1001(){
      http.post("/opsSysDict/getListPage", {
        // 分页参数
        current: 1,
        size: 9999,
        sysDictGroupId: "1956693729474048000",
      }).then(response => {
        let res = response.data;
        // 分页数据
        let data = res.data;
        // 处理数据
        this.dict1001 = data.records

      }).catch(error => {
        this.$message.error(error.message);
      })
    },
    /**
     * 分页查询字典-干系人类型
     */
    getDictListPage1002(){
      http.post("/opsSysDict/getListPage", {
        // 分页参数
        current: 1,
        size: 9999,
        sysDictGroupId: "1956694823562506240",
      }).then(response => {
        let res = response.data;
        // 分页数据
        let data = res.data;
        // 处理数据
        this.dict1002 = data.records

      }).catch(error => {
        this.$message.error(error.message);
      })
    },
    /**
     * 分页查询字典-干系人项目内角色
     */
    getDictListPage1003(){
      http.post("/opsSysDict/getListPage", {
        // 分页参数
        current: 1,
        size: 9999,
        sysDictGroupId: "1956695551370698752",
      }).then(response => {
        let res = response.data;
        // 分页数据
        let data = res.data;
        // 处理数据
        this.dict1003 = data.records

      }).catch(error => {
        this.$message.error(error.message);
      })
    },
    /**
     * 分页查询字典-干系人利益类别
     */
    getDictListPage1004(){
      http.post("/opsSysDict/getListPage", {
        // 分页参数
        current: 1,
        size: 9999,
        sysDictGroupId: "1956696156189335552",
      }).then(response => {
        let res = response.data;
        // 分页数据
        let data = res.data;
        // 处理数据
        this.dict1004 = data.records

      }).catch(error => {
        this.$message.error(error.message);
      })
    },
    /**
     * 分页查询字典-干系人影响领域
     */
    getDictListPage1005(){
      http.post("/opsSysDict/getListPage", {
        // 分页参数
        current: 1,
        size: 9999,
        sysDictGroupId: "1956696852183752704",
      }).then(response => {
        let res = response.data;
        // 分页数据
        let data = res.data;
        // 处理数据
        this.dict1005 = data.records

      }).catch(error => {
        this.$message.error(error.message);
      })
    },
    /**
     * 分页查询字典-干系人利益象限
     */
    getDictListPage1006(){
      http.post("/opsSysDict/getListPage", {
        // 分页参数
        current: 1,
        size: 9999,
        sysDictGroupId: "1956697454611636224",
      }).then(response => {
        let res = response.data;
        // 分页数据
        let data = res.data;
        // 处理数据
        this.dict1006 = data.records

      }).catch(error => {
        this.$message.error(error.message);
      })
    },
    /**
     * 分页查询字典-干系人沟通目标
     */
    getDictListPage1007(){
      http.post("/opsSysDict/getListPage", {
        // 分页参数
        current: 1,
        size: 9999,
        sysDictGroupId: "1956697755804606464",
      }).then(response => {
        let res = response.data;
        // 分页数据
        let data = res.data;
        // 处理数据
        this.dict1007 = data.records

      }).catch(error => {
        this.$message.error(error.message);
      })
    },
    /**
     * 分页查询字典-干系人沟通频次
     */
    getDictListPage1008(){
      http.post("/opsSysDict/getListPage", {
        // 分页参数
        current: 1,
        size: 9999,
        sysDictGroupId: "1956702157693100032",
      }).then(response => {
        let res = response.data;
        // 分页数据
        let data = res.data;
        // 处理数据
        this.dict1008 = data.records

      }).catch(error => {
        this.$message.error(error.message);
      })
    },
    /**
     * 分页查询字典-干系人沟通方式
     */
    getDictListPage1009(){
      http.post("/opsSysDict/getListPage", {
        // 分页参数
        current: 1,
        size: 9999,
        sysDictGroupId: "1956702502230007808",
      }).then(response => {
        let res = response.data;
        // 分页数据
        let data = res.data;
        // 处理数据
        this.dict1009 = data.records

      }).catch(error => {
        this.$message.error(error.message);
      })
    },
    /**
     * 分页查询字典-对干系人依赖
     */
    getDictListPage1010(){
      http.post("/opsSysDict/getListPage", {
        // 分页参数
        current: 1,
        size: 9999,
        sysDictGroupId: "1956702826936246272",
      }).then(response => {
        let res = response.data;
        // 分页数据
        let data = res.data;
        // 处理数据
        this.dict1010 = data.records

      }).catch(error => {
        this.$message.error(error.message);
      })
    },
    /**
     * 分页查询字典-干系人对项目依赖
     */
    getDictListPage1011(){
      http.post("/opsSysDict/getListPage", {
        // 分页参数
        current: 1,
        size: 9999,
        sysDictGroupId: "1956703073620041728",
      }).then(response => {
        let res = response.data;
        // 分页数据
        let data = res.data;
        // 处理数据
        this.dict1011 = data.records

      }).catch(error => {
        this.$message.error(error.message);
      })
    },
    /**
     * 分页查询字典-干系人决策风格
     */
    getDictListPage1012(){
      http.post("/opsSysDict/getListPage", {
        // 分页参数
        current: 1,
        size: 9999,
        sysDictGroupId: "1956711261937344512",
      }).then(response => {
        let res = response.data;
        // 分页数据
        let data = res.data;
        // 处理数据
        this.dict1012 = data.records

      }).catch(error => {
        this.$message.error(error.message);
      })
    },
    /**
     * 分页查询字典-干系人个人动机
     */
    getDictListPage1013(){
      http.post("/opsSysDict/getListPage", {
        // 分页参数
        current: 1,
        size: 9999,
        sysDictGroupId: "1956711481295249408",
      }).then(response => {
        let res = response.data;
        // 分页数据
        let data = res.data;
        // 处理数据
        this.dict1013 = data.records

      }).catch(error => {
        this.$message.error(error.message);
      })
    },
  }
}
</script>

<style scoped>

</style>


